<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>商户采购系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 100%;
            padding: 15px;
        }

        header {
            background-color: #2c3e50;
            color: white;
            padding: 15px;
            text-align: center;
            position: relative;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .header-title {
            font-size: 18px;
            font-weight: bold;
        }

        .header-actions {
            position: absolute;
            right: 15px;
            top: 15px;
        }

        .header-actions i {
            margin-left: 10px;
            font-size: 20px;
        }

        .tabs {
            display: flex;
            background-color: white;
            margin-bottom: 10px;
            border-radius: 5px;
            overflow: hidden;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 14px;
            color: #7f8c8d;
            border-bottom: 2px solid transparent;
        }

        .tab.active {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            font-weight: bold;
        }

        .search-bar {
            background-color: white;
            padding: 10px 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .search-bar input {
            flex: 1;
            border: none;
            outline: none;
            padding: 8px;
            font-size: 14px;
        }

        .search-bar i {
            color: #7f8c8d;
            margin-right: 10px;
        }

        .category-list {
            display: flex;
            overflow-x: auto;
            padding: 10px 0;
            margin-bottom: 10px;
            background-color: white;
            border-radius: 5px;
        }

        .category-item {
            padding: 8px 15px;
            margin-right: 10px;
            white-space: nowrap;
            border-radius: 20px;
            font-size: 13px;
            background-color: #ecf0f1;
            color: #7f8c8d;
        }

        .category-item.active {
            background-color: #3498db;
            color: white;
        }

        .product-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 60px;
        }

        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        .product-image {
            width: 100%;
            height: 120px;
            object-fit: cover;
        }

        .product-info {
            padding: 10px;
        }

        .product-name {
            font-size: 14px;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 40px;
        }

        .product-price {
            color: #e74c3c;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .product-supplier {
            font-size: 12px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }

        .product-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .quantity-control {
            display: flex;
            align-items: center;
        }

        .quantity-btn {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #ecf0f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #7f8c8d;
            border: none;
        }

        .quantity {
            margin: 0 10px;
            font-size: 14px;
        }

        .add-to-cart {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 13px;
        }

        .cart-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #2c3e50;
            color: white;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-info {
            display: flex;
            align-items: center;
        }

        .cart-icon {
            position: relative;
            margin-right: 10px;
        }

        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .cart-total {
            font-size: 16px;
            font-weight: bold;
        }

        .checkout-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: bold;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            width: 90%;
            max-width: 400px;
            border-radius: 8px;
            overflow: hidden;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #ecf0f1;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 20px;
            color: #7f8c8d;
        }

        .modal-body {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .cart-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ecf0f1;
        }

        .cart-item-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 10px;
        }

        .cart-item-details {
            flex: 1;
        }

        .cart-item-name {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .cart-item-supplier {
            font-size: 12px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }

        .cart-item-price {
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 5px;
        }

        .cart-item-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .remove-item {
            color: #e74c3c;
            font-size: 12px;
            background: none;
            border: none;
        }

        .modal-footer {
            padding: 15px;
            border-top: 1px solid #ecf0f1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .total-amount {
            font-weight: bold;
            font-size: 18px;
        }

        .confirm-btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            font-weight: bold;
        }

        .order-success {
            text-align: center;
            padding: 30px 15px;
        }

        .success-icon {
            font-size: 50px;
            color: #2ecc71;
            margin-bottom: 20px;
        }

        .success-message {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .back-to-shop {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* 订单列表样式 */
        .order-list {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 60px;
        }

        .order-card {
            padding: 15px;
            border-bottom: 1px solid #ecf0f1;
        }

        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .order-number {
            font-weight: bold;
        }

        .order-status {
            color: #e74c3c;
            font-size: 14px;
        }

        .order-supplier {
            color: #7f8c8d;
            font-size: 13px;
            margin-bottom: 10px;
        }

        .order-date {
            color: #7f8c8d;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .order-total {
            text-align: right;
            font-weight: bold;
            margin-top: 10px;
        }

        /* 供应商列表样式 */
        .supplier-list {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 60px;
        }

        .supplier-card {
            padding: 15px;
            border-bottom: 1px solid #ecf0f1;
            display: flex;
            align-items: center;
        }

        .supplier-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ecf0f1;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-size: 20px;
        }

        .supplier-info {
            flex: 1;
        }

        .supplier-name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .supplier-rating {
            color: #f39c12;
            font-size: 13px;
        }

        .supplier-products {
            color: #7f8c8d;
            font-size: 12px;
            margin-top: 5px;
        }

        .supplier-contact {
            color: #3498db;
            font-size: 14px;
            text-decoration: none;
        }

        /* 隐藏内容 */
        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        @media (max-width: 400px) {
            .product-list {
                grid-template-columns: 1fr;
            }
        }
    </style>
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">-->
    <link rel="stylesheet" href="../fontawesome-free-6.7.2-web/css/all.min.css">
</head>
<body>
<header>
    <div class="header-title">商户采购系统</div>
    <div class="header-actions">
        <i class="fas fa-bell"></i>
        <i class="fas fa-user"></i>
    </div>
</header>

<div class="container">
    <div class="tabs">
        <div class="tab active" data-tab="products">采购商品</div>
        <div class="tab" data-tab="orders">我的订单</div>
        <div class="tab" data-tab="suppliers">供应商</div>
    </div>

    <!-- 商品采购部分 -->
    <div class="content-section active" id="products-section">
        <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索商品名称、供应商...">
        </div>

        <div class="category-list">
            <div class="category-item active">全部</div>
            <div class="category-item">生鲜食品</div>
            <div class="category-item">酒水饮料</div>
            <div class="category-item">粮油调味</div>
            <div class="category-item">日用百货</div>
            <div class="category-item">清洁用品</div>
            <div class="category-item">办公用品</div>
        </div>

        <div class="product-list">
            <!-- 商品列表将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 我的订单部分 -->
    <div class="content-section" id="orders-section">
        <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索订单号、供应商...">
        </div>

        <div class="order-list" id="orderList">
            <!-- 订单列表将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 供应商部分 -->
    <div class="content-section" id="suppliers-section">
        <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索供应商名称...">
        </div>

        <div class="supplier-list" id="supplierList">
            <!-- 供应商列表将通过JavaScript动态生成 -->
        </div>
    </div>
</div>

<div class="cart-bar">
    <div class="cart-info">
        <div class="cart-icon">
            <i class="fas fa-shopping-cart"></i>
            <div class="cart-count">0</div>
        </div>
        <div class="cart-total">¥0.00</div>
    </div>
    <button class="checkout-btn">去结算</button>
</div>

<!-- 购物车模态框 -->
<div class="modal" id="cartModal">
    <div class="modal-content">
        <div class="modal-header">
            <span>我的采购单</span>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body" id="cartItems">
            <!-- 购物车内容将通过JavaScript动态生成 -->
        </div>
        <div class="modal-footer">
            <div class="total-amount">总计: ¥0.00</div>
            <button class="confirm-btn">确认下单</button>
        </div>
    </div>
</div>

<!-- 下单成功模态框 -->
<div class="modal" id="successModal">
    <div class="modal-content">
        <div class="order-success">
            <div class="success-icon">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="success-message">下单成功！</div>
            <p>您的订单已提交，供应商会尽快处理</p>
            <button class="back-to-shop">返回继续采购</button>
        </div>
    </div>
</div>

<!-- 订单详情模态框 -->
<div class="modal" id="orderDetailModal">
    <div class="modal-content">
        <div class="modal-header">
            <span>订单详情</span>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body" id="orderDetailContent">
            <!-- 订单详情内容将通过JavaScript动态生成 -->
        </div>
        <div class="modal-footer">
            <button class="confirm-btn close-modal-btn">关闭</button>
        </div>
    </div>
</div>

<script>
    // 测试数据 - 商品列表
    const products = [
        {
            id: 1,
            name: "优质东北大米 10kg",
            price: 68.00,
            supplier: "东北粮油供应商",
            category: "粮油调味",
            image: "./images/rice.png"
        },
        {
            id: 2,
            name: "鲁花花生油 5L",
            price: 129.90,
            supplier: "山东粮油公司",
            category: "粮油调味",
            image: "./images/peanutOil.png"
        },
        {
            id: 3,
            name: "海天生抽酱油 1.9L",
            price: 18.80,
            supplier: "广东调味品厂",
            category: "粮油调味",
            image: "./images/soySauce.png"
        },
        {
            id: 4,
            name: "新鲜鸡蛋 30枚",
            price: 25.00,
            supplier: "本地养殖场",
            category: "生鲜食品",
            image: "./images/egg.png"
        },
        {
            id: 5,
            name: "精品五花肉 1kg",
            price: 42.00,
            supplier: "本地屠宰场",
            category: "生鲜食品",
            image: "./images/streakyPork.png"
        },
        {
            id: 6,
            name: "农夫山泉矿泉水 24瓶",
            price: 36.00,
            supplier: "饮料批发商",
            category: "酒水饮料",
            image: "./images/mineralWater.png"
        },
        {
            id: 7,
            name: "清风抽纸 3层120抽*24包",
            price: 59.90,
            supplier: "日用品供应商",
            category: "日用百货",
            image: "./images/facialTissue.png"
        },
        {
            id: 8,
            name: "蓝月亮洗衣液 3kg",
            price: 49.90,
            supplier: "清洁用品公司",
            category: "清洁用品",
            image: "./images/WashingLiquid.png"
        }
    ];

    // 测试数据 - 供应商列表
    const suppliers = [
        {
            id: 1,
            name: "东北粮油供应商",
            rating: 4.8,
            products: ["大米", "面粉", "杂粮"],
            contact: "13800138001"
        },
        {
            id: 2,
            name: "山东粮油公司",
            rating: 4.7,
            products: ["花生油", "调和油", "芝麻油"],
            contact: "13800138002"
        },
        {
            id: 3,
            name: "广东调味品厂",
            rating: 4.5,
            products: ["酱油", "醋", "调味料"],
            contact: "13800138003"
        },
        {
            id: 4,
            name: "本地养殖场",
            rating: 4.6,
            products: ["鸡蛋", "鸡肉", "鸭肉"],
            contact: "13800138004"
        },
        {
            id: 5,
            name: "饮料批发商",
            rating: 4.4,
            products: ["矿泉水", "碳酸饮料", "果汁"],
            contact: "13800138005"
        },
        {
            id: 6,
            name: "日用品供应商",
            rating: 4.9,
            products: ["纸巾", "洗漱用品", "清洁用品"],
            contact: "13800138006"
        }
    ];

    // 测试数据 - 订单列表
    let orders = [
        {
            id: "ORD20230001",
            date: "2023-05-15 14:30",
            supplier: "东北粮油供应商",
            status: "已发货",
            total: 256.00,
            items: [
                { productId: 1, name: "优质东北大米 10kg", price: 68.00, quantity: 2, total: 136.00 },
                { productId: 2, name: "鲁花花生油 5L", price: 129.90, quantity: 1, total: 129.90 }
            ]
        },
        {
            id: "ORD20230002",
            date: "2023-05-10 09:15",
            supplier: "广东调味品厂",
            status: "已完成",
            total: 56.40,
            items: [
                { productId: 3, name: "海天生抽酱油 1.9L", price: 18.80, quantity: 3, total: 56.40 }
            ]
        },
        {
            id: "ORD20230003",
            date: "2023-05-05 16:45",
            supplier: "本地养殖场",
            status: "待发货",
            total: 67.00,
            items: [
                { productId: 4, name: "新鲜鸡蛋 30枚", price: 25.00, quantity: 2, total: 50.00 },
                { productId: 5, name: "精品五花肉 1kg", price: 42.00, quantity: 1, total: 42.00 }
            ]
        }
    ];

    // 购物车数据
    let cart = [];

    // DOM元素
    const productListEl = document.querySelector('.product-list');
    const cartCountEl = document.querySelector('.cart-count');
    const cartTotalEl = document.querySelector('.cart-total');
    const checkoutBtn = document.querySelector('.checkout-btn');
    const cartModal = document.getElementById('cartModal');
    const cartItemsEl = document.getElementById('cartItems');
    const modalTotalEl = document.querySelector('.modal-footer .total-amount');
    const successModal = document.getElementById('successModal');
    const closeModalBtn = document.querySelector('.close-modal');
    const confirmBtn = document.querySelector('.confirm-btn');
    const backToShopBtn = document.querySelector('.back-to-shop');
    const categoryItems = document.querySelectorAll('.category-item');
    const tabs = document.querySelectorAll('.tab');
    const contentSections = document.querySelectorAll('.content-section');
    const orderListEl = document.getElementById('orderList');
    const supplierListEl = document.getElementById('supplierList');
    const orderDetailModal = document.getElementById('orderDetailModal');
    const orderDetailContent = document.getElementById('orderDetailContent');

    // 初始化页面
    function init() {
        renderProducts(products);
        renderOrders(orders);
        renderSuppliers(suppliers);
        setupEventListeners();
    }

    // 渲染商品列表
    function renderProducts(productsToRender) {
        productListEl.innerHTML = '';

        productsToRender.forEach(product => {
            const productEl = document.createElement('div');
            productEl.className = 'product-card';
            productEl.innerHTML = `
                    <img src="${product.image}" alt="${product.name}" class="product-image">
                    <div class="product-info">
                        <div class="product-name">${product.name}</div>
                        <div class="product-price">¥${product.price.toFixed(2)}</div>
                        <div class="product-supplier">${product.supplier}</div>
                        <div class="product-actions">
                            <div class="quantity-control">
                                <button class="quantity-btn minus" data-id="${product.id}">-</button>
                                <span class="quantity" data-id="${product.id}">0</span>
                                <button class="quantity-btn plus" data-id="${product.id}">+</button>
                            </div>
                            <button class="add-to-cart" data-id="${product.id}">加入采购单</button>
                        </div>
                    </div>
                `;
            productListEl.appendChild(productEl);
        });
    }

    // 渲染订单列表
    function renderOrders(ordersToRender) {
        orderListEl.innerHTML = '';

        if (ordersToRender.length === 0) {
            orderListEl.innerHTML = '<p style="text-align: center; padding: 20px;">暂无订单记录</p>';
            return;
        }

        ordersToRender.forEach(order => {
            const orderEl = document.createElement('div');
            orderEl.className = 'order-card';
            orderEl.innerHTML = `
                    <div class="order-header">
                        <div class="order-number">订单号: ${order.id}</div>
                        <div class="order-status">${order.status}</div>
                    </div>
                    <div class="order-supplier">供应商: ${order.supplier}</div>
                    <div class="order-date">下单时间: ${order.date}</div>
                    <div class="order-total">合计: ¥${order.total.toFixed(2)}</div>
                `;
            orderEl.addEventListener('click', () => showOrderDetail(order.id));
            orderListEl.appendChild(orderEl);
        });
    }

    // 渲染供应商列表
    function renderSuppliers(suppliersToRender) {
        supplierListEl.innerHTML = '';

        suppliersToRender.forEach(supplier => {
            const supplierEl = document.createElement('div');
            supplierEl.className = 'supplier-card';
            supplierEl.innerHTML = `
                    <div class="supplier-avatar">
                        <i class="fas fa-store"></i>
                    </div>
                    <div class="supplier-info">
                        <div class="supplier-name">${supplier.name}</div>
                        <div class="supplier-rating">
                            ${'★'.repeat(Math.floor(supplier.rating))}${'☆'.repeat(5 - Math.floor(supplier.rating))} ${supplier.rating}
                        </div>
                        <div class="supplier-products">主营: ${supplier.products.join(', ')}</div>
                    </div>
                    <a href="tel:${supplier.contact}" class="supplier-contact">
                        <i class="fas fa-phone-alt"></i>
                    </a>
                `;
            supplierListEl.appendChild(supplierEl);
        });
    }

    // 显示订单详情
    function showOrderDetail(orderId) {
        const order = orders.find(o => o.id === orderId);
        if (!order) return;

        orderDetailContent.innerHTML = `
            <div class="order-header">
                <div class="order-number">订单号: ${order.id}</div>
                <div class="order-status">${order.status}</div>
            </div>
            <div class="order-supplier">供应商: ${order.supplier}</div>
            <div class="order-date">下单时间: ${order.date}</div>

            <div style="margin: 15px 0; border-top: 1px solid #eee; padding-top: 15px;">
                <h4 style="margin-bottom: 10px;">订单商品</h4>
                ${order.items.map(item => `
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f5f5f5;">
                        <div>
                            <div>${item.name}</div>
                            <div style="font-size: 12px; color: #999;">¥${item.price.toFixed(2)} × ${item.quantity}</div>
                        </div>
                        <div style="font-weight: bold;">¥${item.total.toFixed(2)}</div>
                    </div>
                `).join('')}
            </div>

            <div style="text-align: right; font-weight: bold; font-size: 16px; margin-top: 15px;">
                合计: ¥${order.total.toFixed(2)}
            </div>
        `;

        orderDetailModal.style.display = 'flex';
    }

    // 设置事件监听
    function setupEventListeners() {
        // 加减数量按钮
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('plus')) {
                const productId = parseInt(e.target.getAttribute('data-id'));
                increaseQuantity(productId);
            } else if (e.target.classList.contains('minus')) {
                const productId = parseInt(e.target.getAttribute('data-id'));
                decreaseQuantity(productId);
            } else if (e.target.classList.contains('add-to-cart')) {
                const productId = parseInt(e.target.getAttribute('data-id'));
                addToCart(productId);
            } else if (e.target.classList.contains('remove-item')) {
                const productId = parseInt(e.target.getAttribute('data-id'));
                removeFromCart(productId);
            } else if (e.target.classList.contains('close-modal-btn')) {
                orderDetailModal.style.display = 'none';
            }
        });

        // 结算按钮
        checkoutBtn.addEventListener('click', openCartModal);

        // 关闭模态框
        closeModalBtn.addEventListener('click', closeCartModal);

        // 确认下单
        confirmBtn.addEventListener('click', confirmOrder);

        // 返回继续采购
        backToShopBtn.addEventListener('click', function() {
            successModal.style.display = 'none';
        });

        // 点击模态框外部关闭
        window.addEventListener('click', function(e) {
            if (e.target === cartModal) {
                closeCartModal();
            }
            if (e.target === successModal) {
                successModal.style.display = 'none';
            }
            if (e.target === orderDetailModal) {
                orderDetailModal.style.display = 'none';
            }
        });

        // 分类筛选
        categoryItems.forEach(item => {
            item.addEventListener('click', function() {
                categoryItems.forEach(i => i.classList.remove('active'));
                this.classList.add('active');

                const category = this.textContent;
                if (category === '全部') {
                    renderProducts(products);
                } else {
                    const filteredProducts = products.filter(p => p.category === category);
                    renderProducts(filteredProducts);
                }
            });
        });

        // 选项卡切换
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                const tabId = this.getAttribute('data-tab');
                contentSections.forEach(section => section.classList.remove('active'));
                document.getElementById(`${tabId}-section`).classList.add('active');
            });
        });
    }

    // 增加数量
    function increaseQuantity(productId) {
        const quantityEl = document.querySelector(`.quantity[data-id="${productId}"]`);
        let quantity = parseInt(quantityEl.textContent);
        quantityEl.textContent = quantity + 1;
    }

    // 减少数量
    function decreaseQuantity(productId) {
        const quantityEl = document.querySelector(`.quantity[data-id="${productId}"]`);
        let quantity = parseInt(quantityEl.textContent);
        if (quantity > 0) {
            quantityEl.textContent = quantity - 1;
        }
    }

    // 添加到购物车
    function addToCart(productId) {
        const quantityEl = document.querySelector(`.quantity[data-id="${productId}"]`);
        const quantity = parseInt(quantityEl.textContent);

        if (quantity <= 0) {
            alert('请选择至少一件商品');
            return;
        }

        const product = products.find(p => p.id === productId);
        const existingItem = cart.find(item => item.id === productId);

        if (existingItem) {
            existingItem.quantity += quantity;
        } else {
            cart.push({
                id: product.id,
                name: product.name,
                price: product.price,
                supplier: product.supplier,
                image: product.image,
                quantity: quantity
            });
        }

        // 重置数量显示
        quantityEl.textContent = '0';

        updateCartSummary();
        showAddToCartSuccess();
    }

    // 从购物车移除
    function removeFromCart(productId) {
        cart = cart.filter(item => item.id !== productId);
        renderCartItems();
        updateCartSummary();
    }

    // 更新购物车摘要
    function updateCartSummary() {
        const totalCount = cart.reduce((sum, item) => sum + item.quantity, 0);
        const totalAmount = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

        cartCountEl.textContent = totalCount;
        cartTotalEl.textContent = `¥${totalAmount.toFixed(2)}`;

        // 更新模态框中的总金额
        modalTotalEl.textContent = `总计: ¥${totalAmount.toFixed(2)}`;

        // 如果没有商品，禁用结算按钮
        checkoutBtn.disabled = totalCount === 0;
    }

    // 打开购物车模态框
    function openCartModal() {
        if (cart.length === 0) {
            alert('您的采购单是空的');
            return;
        }

        renderCartItems();
        cartModal.style.display = 'flex';
    }

    // 关闭购物车模态框
    function closeCartModal() {
        cartModal.style.display = 'none';
    }

    // 渲染购物车内容
    function renderCartItems() {
        cartItemsEl.innerHTML = '';

        if (cart.length === 0) {
            cartItemsEl.innerHTML = '<p style="text-align: center; padding: 20px;">您的采购单是空的</p>';
            return;
        }

        cart.forEach(item => {
            const cartItemEl = document.createElement('div');
            cartItemEl.className = 'cart-item';
            cartItemEl.innerHTML = `
                    <img src="${item.image}" alt="${item.name}" class="cart-item-image">
                    <div class="cart-item-details">
                        <div class="cart-item-name">${item.name}</div>
                        <div class="cart-item-supplier">${item.supplier}</div>
                        <div class="cart-item-price">¥${item.price.toFixed(2)} × ${item.quantity}</div>
                        <div class="cart-item-actions">
                            <div>小计: ¥${(item.price * item.quantity).toFixed(2)}</div>
                            <button class="remove-item" data-id="${item.id}">删除</button>
                        </div>
                    </div>
                `;
            cartItemsEl.appendChild(cartItemEl);
        });
    }

    // 确认订单
    function confirmOrder() {
        // 生成新订单
        const newOrder = {
            id: `ORD${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`,
            date: new Date().toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            }).replace(/\//g, '-'),
            supplier: cart[0].supplier, // 简单起见，取第一个商品的供应商
            status: "待发货",
            total: cart.reduce((sum, item) => sum + (item.price * item.quantity), 0),
            items: cart.map(item => ({
                productId: item.id,
                name: item.name,
                price: item.price,
                quantity: item.quantity,
                total: item.price * item.quantity
            }))
        };

        // 添加到订单列表
        orders.unshift(newOrder);
        renderOrders(orders);

        // 显示成功消息
        closeCartModal();
        successModal.style.display = 'flex';

        // 清空购物车
        cart = [];
        updateCartSummary();
    }

    // 显示加入购物车成功提示
    function showAddToCartSuccess() {
        const toast = document.createElement('div');
        toast.textContent = '已加入采购单';
        toast.style.position = 'fixed';
        toast.style.bottom = '80px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.backgroundColor = 'rgba(0,0,0,0.7)';
        toast.style.color = 'white';
        toast.style.padding = '10px 20px';
        toast.style.borderRadius = '4px';
        toast.style.zIndex = '1000';
        toast.style.transition = 'opacity 0.5s';
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 500);
        }, 2000);
    }

    // 初始化应用
    init();
</script>
</body>
</html>